<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
        }
        .box{
            margin: 50px auto;
            width: 337px;
            padding: 10px;
            border: 1px solid lightblue;
        }
        input,
        button,
        option{
            width: 60px;
            height: 30px;
            outline: none;
            transition: 150ms;
        }
        button{
            background: lightblue;
            border: none;
        }
        button:active{
            background: rgb(139, 175, 187);
        }
        p{
            border-bottom: 1px solid bisque;
            width: 337px;
        }
        span{
            display: inline-block;
            width: 60%;
            height: 20px;
        }
    </style>

</head>
<body>
<div class="box">
    <input type="text" id="value1" value="">
    <select name="operator" id="operator">
        <option value="+" selected>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="value2" value="">
    <button id="calculate">计算</button>
    <button id="reset">重置</button>
    <p >计算结果:<span id="result"></span></p>
</div>
    <script src="js/dev/jquery-3.4.1.js"></script>
    <script>
        $(function () {
           $('#calculate').click(function () {
              let num1 = $('#value1').val();
              let num2 = $('#value2').val();
              let result = 0;
              let operation;
              let isError = false;
              $('#operator option').each(function (index,op) {
                  if ($(this).prop('selected')){
                      operation = $(this).val();
                  }
              });
              switch (operation) {
                  case '+':result = parseInt(num1) + parseInt(num2);
                      break;
                  case '-':result = parseInt(num1) - parseInt(num2);
                      break;
                  case '*':result = parseInt(num1) * parseInt(num2);
                      break;
                  default:
                      if (num2 == 0){
                      window.alert("除数不能为0");
                          isError = true;
                  } else{
                          result = parseInt(num1) / parseInt(num2);
                      }
              }
               if (!isError){
                   $('#result').html(num1 + operation + num2 + "=" + result);
               }
           });
           $('#reset').on('click',function () {
               $('#value1').val('');
               $('#value2').val('');
               $('#operator>option:first').prop({selected:'selected'});
           })
        });
    </script>
</body>
</html>